<template>
  <div>
    <h3>通知中心</h3>
    <div class="moment-main card" v-for="item in moments">
      <img class="group_logo" :src="item.logo"
           alt="头像" title="头像">
      <div class="moment">
        <span class="user_name"><b>{{item.group_name}}</b> <span style="font-size: 0.8em">发送人{{item.createdName}}</span></span>
        <div class="time">{{item.update_time}}</div>
        <h4 style="text-align: center">{{item.title}}</h4>
        <div class="content_detail">{{item.content}}
        </div>
      </div>
      <div class="btn-group" v-if="User_id===item.created_id">
        <ul>
          <!--<li @click="edit('read',item.id)" class="choose" v-if="item.status==='read'"><i class="el-icon-check"></i>已读
          </li>
          <li @click="edit('read',item.id)" class="choose" v-if="item.status==='ok'"><i class="el-icon-check"></i>未读
          </li>-->
          <li @click="edit('delete',item.id)"><i class="el-icon-delete"></i>删除</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment,indent */

  import NoticeCenter from '@/components/smallComponents/notice-center'
  import { getNotice, updateNotice } from '../../public/api'
  import Bus from '../../bus/bus'

  export default {
    components: {NoticeCenter},
    data () {
      return {
        moments: []
      }
    },
    methods: {
      Init: function () {
        getNotice().then(
          data => {
            this.moments = []
            var _this = this;
            (data.list).forEach(function (item) {
              item.forEach(function (item) {
                var groupInfo = item.group_info || {
                  name: '没有组',
                  avatar: 'http://shp.qlogo.cn/ttsing/72038674/72038674/100?ts=0'
                }
                var userInfo = item.user_info || {name: 'buncunzai'}
                _this.moments.push({
                  id: item.id,
                  logo: groupInfo.avatar,
                  group_name: groupInfo.name,
                  createdName: userInfo.name,
                  update_time: item.created_at,
                  title: item.title,
                  status: item.status,
                  content: item.content,
                  created_id: item.created_id
                })
              })
            })
//            console.log(this.moments)
            this.moments = this.moments.sort(function (a, b) {
              return b.id - a.id
            })
          }
        ).catch(msg => {

        })
      },
      edit (str, id) {
        var status
        if (str === 'read') {
          status = 'read'
        } else if (str === 'delete') {
          status = 'delete'
        }
        updateNotice({
          id: id,
          status: status
        }).then(
          data => {
            console.log(data)
            this.Init()
          }
        ).catch()
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    mounted () {
      this.Init()
      Bus.$on('loadMore', () => {
        console.log('通知列表加载更多')
      })
    },
    beforeDestroy () {
      Bus.$off('loadMore')
    }
  }

</script>
<style scoped>

  .card {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    background: #fff;
    text-align: left;
    border-radius: 5px;
  }

  h3 {
    text-align: center;
  }

  .moment-main {
    text-align: left;
    background: #fff;
    width: 560px;
    padding: 20px 20px 4px;
  }

  .moment {
    width: 500px;
    overflow: hidden;
  }

  .moment .time {
    font-size: 0.8em;
    margin: 5px 0;
    color: #808080;

  }

  .moment-main img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin: 5px;

  }

  .btn-group {
    width: 560px;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    /*background: red;*/
    overflow: hidden;
  }

  ul {
    padding: 0;
    margin: 0 -2px;
    border-top: 1px solid gray;
    text-align: center;
    overflow: hidden;
  }

  ul li {
    vertical-align: middle;
    display: inline-block;
    list-style: none;
    height: 40px;
    line-height: 40px;
    /*width: 281px;*/
    width: 100%;
    float: left;
    border-right: 1px solid gray;
    /*background: pink;*/
  }

  ul li:hover {
    cursor: pointer;
  }

  .choose {
    color: red;
  }

  /*ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #8090B5;
  }*/
</style>
